<html>
    <head>
        <meta charset="utf-8"/>
        <title>父子组件练习</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- 父组件 -->
        <div id="app">
            <comp1 age="10">
                <h1>hello world</h1>
            </comp1>
        </div>



        <!-- 子组件 -->
        <template id="c1">
            <div>
                <h2>i have {{age}}</h2>
                <slot></slot>
            </div>
        </template>
    </body>
</html>

<script>

//局部组件
let App = new Vue({
    el: '#app',
    components:{
        comp1:{
            template:"#c1",
            props:{
                age:String
            }
            // template:"<h1>hello</h1>"
        }
    }
})
</script>

